<template>
  <div id="app">
    <el-tabs
        type="border-card"
        tab-position="left"
        @tab-click="handleClick"
        v-model="activeName"
    >
      <el-tab-pane
          v-for="(item, index) in systemList"
          :key="index"
          :label="item.systemName"
          :name="String(item.id)"
      ></el-tab-pane>
      <div class="topSearch" v-if="systemList.length">
        <span>
          订单名称:
          <el-input
              clearable
              size="small"
              style="width: 200px"
              placeholder="请输入订单名称"
              v-model="params.storeName"
          ></el-input>
        </span>
        <span>
          CAD操作人员:
          <el-input
              clearable
              size="small"
              style="width: 200px"
              placeholder="请输入CAD操作人员名称"
              v-model="params.cadName"
          ></el-input>
        </span>
        <span>
          仓库:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择仓库名称"
              v-model="params.areaId"
          >
            <el-option
                v-for="(e, i) in areaData"
                :label="e.areaName"
                :key="i"
                :value="e.area"
            ></el-option>
          </el-select>
        </span>
        <span>
          出库状态:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择出库状态"
              v-model="params.outStatus"
          >
            <el-option
                v-for="(e, i) in outSpringStatus"
                :label="e.name"
                :key="i"
                :value="e.id"
            ></el-option>
          </el-select>
        </span>

        <span style="display: flex; align-items: center">
          <!-- 旧的 -->
          <el-button
              size="small"
              @click="_search"
              :style="{
              background: headerStyle,
              color: '#ffffff',
              border: 'none',
            }"
          >搜 索</el-button
          >
          <el-button size="small" @click="_reset">重 置</el-button>
           <el-button
               size="small"
               :style="{
              background: headerStyle,
              color: '#ffffff',
              border: 'none',
            }"
               @click="_add"
               v-if="authority.includes(202)"
           >录入订单</el-button
           >
          <el-button
              size="small"
              :style="{
              background: headerStyle,
              color: '#ffffff',
              border: 'none',
            }"
              @click="_addNew"
              v-if="authority.includes(200) && false"
          >录入材料订单</el-button
          >
          <el-button
              size="small"
              type="text"
              @click="isShowMoreTab = !isShowMoreTab"
          >{{ isShowMoreTab ? '收起' : '更多操作' }}
            <i
                :class="[
                isShowMoreTab ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
              ]"
            ></i
            ></el-button>
        </span>
        <template v-if="isShowMoreTab">
          <span>
            订单类型:
            <el-select
                clearable
                size="small"
                style="width: 200px"
                placeholder="请选择订单类型"
                v-model="params.orderType"
            >
              <el-option
                  v-for="(e, i) in orderType"
                  :label="e.name"
                  :key="i"
                  :value="e.id"
              ></el-option>
            </el-select>
          </span>
          <span>
            是否欠款:
            <el-select
                clearable
                size="small"
                style="width: 200px"
                placeholder="请选择"
                v-model="params.isDebt"
            >
              <el-option
                  v-for="(e, i) in isDebtData"
                  :label="e.name"
                  :key="i"
                  :value="e.id"
              ></el-option>
            </el-select>
          </span>
          <span>
            排序规则:
            <el-select
                clearable
                size="small"
                style="width: 200px"
                placeholder="请选择"
                v-model="params.orderBy"
            >
              <el-option
                  v-for="(e, i) in ruleData"
                  :label="e.name"
                  :key="i"
                  :value="e.id"
              ></el-option>
            </el-select>
          </span>
          <span
          >时间：
            <el-date-picker
                v-model="sateValue"
                type="daterange"
                range-separator="至"
                clearable
                size="small"
                @change="selectTime"
                style="width: 250px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </span>

          <span>
            <el-button
                size="small"
                @click="_contactList"
                v-if="authority.includes(203)"
            >合同列表</el-button
            >
            <el-button
                size="small"
                :style="{
                background: headerStyle,
                color: '#ffffff',
                border: 'none',
              }"
                @click="cadModel"
                v-if="authority.includes(204) && cadShow"
            >CAD模式</el-button
            >
            <el-button
                size="small"
                :style="{
                background: headerStyle,
                color: '#ffffff',
                border: 'none',
              }"
                @click="cancelCadModel"
                v-if="authority.includes(201) && !cadShow"
            >退出CAD模式</el-button
            >
            <!--                <el-button type="text" icon="el-icon-s-fold" style="font-size: 18px" @click="openDrawer"></el-button>-->
          </span>
        </template>
      </div>
      <el-drawer
          title="控制单元格"
          :visible.sync="drawer"
          size="10%"
          :show-close="true"
          :wrapperClosable="false"
          :with-header="false"
      >
        <div
            style="
            display: flex;
            justify-content: space-around;
            margin-top: 100px;
            flex-direction: column;
            align-items: center;
          "
        >
          <p
              style="margin-bottom: 10px"
              v-for="(item, index) in cloumn"
              :key="index"
          >
            <span style="width: 100px; display: inline-block">{{
                item.name
              }}</span>
            <el-switch
                style="margin-left: 15px"
                v-model="item.show"
            ></el-switch>
          </p>
          <div class="demo-drawer__footer" style="margin-top: 100px">
            <el-button @click="drawer = false" size="small">取 消</el-button>
            <el-button
                size="small"
                type="primary"
                @click="confirmShow"
                :loading="loading"
            >{{ loading ? '提交中 ...' : '确 定' }}
            </el-button>
          </div>
        </div>
      </el-drawer>
      <!--中部表格-->
      <div class="centerTable" v-if="systemList.length">
        <el-table
            :data="orderData"
            border
            v-loading="loading"
            ref="table"
            @header-dragend="handleHeaderDragend"
            height="calc(100vh - 280px)"
            :cellStyle="{ textAlign: 'center', 'font-size': '14px' }"
            :header-cell-style="{
            color: 'white',
            textAlign: 'center',
            fontWeight: 400,
            fontSize: '13px',
            background: headerStyle,
          }"
        >
          <!-- 自定义空状态 -->
          <template slot="empty">
            <div style="text-align: left; padding: 20px">
              <el-icon
                  name="el-icon-info"
                  style="font-size: 24px; color: #ccc"
              ></el-icon>
              <p style="margin-top: 10px">暂无数据</p>
            </div>
          </template>
          <!--        <el-table-column prop="orderType" label="类型" width="80px" v-if="getShow('orderType')">-->
          <el-table-column
              prop="orderType"
              :key="'orderType'"
              label="类型"
              width="80px"
          >
            <template v-slot:default="scope">
              <span :style="{
                  color: scope.row.orderType == 2 ? '#FF8C00' : '#1E90FF',
                }"
              >{{ ({1: '新增店铺', 2: '老店翻新', 3: '新增店铺含利旧'})[scope.row.orderType] }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
              prop="lockInventory"
              :key="'lockInventory'"
              label="订单状态"
              width="75px"
              v-if="cadShow"
          >
            <template v-slot:default="scope">
              <span
                  :style="{
                  color: scope.row.lockInventory == 2 ? '#1E90FF' : '#FF8C00',
                }"
              >{{ scope.row.lockInventory == 2 ? '已确认' : '未确认' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
              prop="materialPayMoneyStatus"
              :key="'materialPayMoneyStatus'"
              label="材料收款是否到账"
              width="75px"
              v-if="cadShow && false"
          >
            <template v-slot:default="scope">
              <p>
                <span
                    :style="{
                    color:
                      scope.row.materialPayMoneyStatus == 1
                        ? '#1E90FF'
                        : '#FF8C00',
                  }"
                >{{
                    scope.row.materialPayMoneyStatus == 1 ? '已收款' : '未收款'
                  }}</span
                >
              </p>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--              prop="shelfPayMoneyStatus"-->
          <!--              :key="'shelfPayMoneyStatus'"-->
          <!--              label="货架收款是否到账"-->
          <!--              width="75px"-->
          <!--              v-if="cadShow"-->
          <!--          >-->
          <!--            <template v-slot:default="scope">-->
          <!--              <p :style="{}">-->
          <!--                <span-->
          <!--                    :style="{-->
          <!--                    color:-->
          <!--                      scope.row.shelfPayMoneyStatus == 1-->
          <!--                        ? '#1E90FF'-->
          <!--                        : '#FF8C00',-->
          <!--                  }"-->
          <!--                >{{-->
          <!--                    scope.row.shelfPayMoneyStatus == 1 ? '已到账' : '未到账'-->
          <!--                  }}</span-->
          <!--                >-->
          <!--              </p>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
              prop="isDebt"
              :key="'isDebt'"
              label="是否欠款"
              width="75px"
              v-if="cadShow"
          >
            <template v-slot:default="scope">
              <span
                  :style="{
                  color: scope.row.isDebt == 1 ? '#1E90FF' : '#FF8C00',
                }"
                  @click="scope.row.isDebt == 1 ? null : dealDebt(scope.row)"
              >{{ scope.row.isDebt == 1 ? '已结清' : '欠款' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
              prop="isKaYou"
              :key="'isKaYou'"
              label="卡游层板"
              width="75px"
              v-if="cadShow"
          >
            <template v-slot:default="scope">
              <span
                  :style="{
                  color: scope.row.isKaYou == 1 ? '#1E90FF' : '#FF8C00',
                }"
              >{{ scope.row.isKaYou == 1 ? '是' : '否' }}</span
              >
            </template>
          </el-table-column>

          <el-table-column
              prop="storeName"
              :key="'storeName'"
              label="订单名称"
              :width="cadShow ? '180px' : '250px'"
              :show-overflow-tooltip="cadShow ? true : false"
          ></el-table-column>
          <el-table-column
              prop="systemName"
              :key="'systemName'"
              label="所属品牌"
              width="95px"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="jhGoodsCount"
              :key="'jhGoodsCount'"
              label="拣货货架数量"
              width="95px"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              :key="'azGoodsCount'"
              label="货架组数"
              width="130px"
              show-overflow-tooltip
          >
            <template v-slot:default="scope">
              <p style="color: #1370fb">
                营业区安装：{{ scope.row.azGoodsCount }}
              </p>
              <p style="color: #1370fb">
                仓储区安装：{{ scope.row.azStorageCount }}
              </p>
              <p style="color: #1370fb">
                收银台：{{ scope.row.cashRegisterCount || 0 }}
              </p>
              <p style="color: #303e9d">
                营业区拆卸：{{ scope.row.azDisassembleCount }}
              </p>
              <p style="color: #303e9d">
                仓储区拆卸：{{ scope.row.azDisStorageCount }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
              prop="areaName"
              :key="'areaName'"
              label="所属仓库"
              width="75px"
          >
            <template v-slot:default="scope">
              <span>{{ $store.state.areaMap[scope.row.area] || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="creatorName"
              :key="'creatorName'"
              label="发起人"
              width="70px"
          ></el-table-column>
          <el-table-column
              prop="createdAt"
              :key="'createdAt'"
              label="创建时间"
              v-if="cadShow"
              width="110px"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="deliveryDate"
              :key="'deliveryDate'"
              label="货架发货日期"
              width="95px"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="address"
              :key="'address'"
              label="发货地址"
              width="180px"
              v-if="cadShow"
          ></el-table-column>
          <el-table-column
              prop="distance"
              :key="'distance'"
              label="仓库到店导航里程/公里"
              width="100px"
              v-if="cadShow"
          ></el-table-column>
          <!--          <el-table-column-->
          <!--              prop="storeArea"-->
          <!--              :key="'storeArea'"-->
          <!--              label="面积/平方"-->
          <!--              width="90px"-->
          <!--              v-if="cadShow"-->
          <!--          ></el-table-column>-->
          <!-- <el-table-column
            label="总成本/元"
            :key="'installationCost'"
            width="130px"
            v-if="cadShow"
          >
            <template v-slot:default="scope">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                "
              >
                <p style="font-size: 14px">
                  安装(含距离):{{ scope.row.installationCost || 0 }}
                </p>
                <p style="font-size: 14px">拣货：{{ scope.row.jhCost || 0 }}</p>
                <p style="font-size: 14px">装车：{{ scope.row.zcCost || 0 }}</p>
                <p style="font-size: 14px">
                  距离：{{ scope.row.distanceCost || 0 }}
                </p>
                <p style="font-size: 14px">卸车：{{ scope.row.xcCost || 0 }}</p>
                <p style="color: #66b1ff; font-size: 14px">
                  总提成：{{ scope.row.totalCost || 0 }}
                </p>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            label="付款明细"
            :key="'payCount'"
            width="150px"
            show-overflow-tooltip
            v-if="cadShow"
          >
            <template v-slot:default="scope">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                "
              >
                <p style="font-size: 13px">
                  付款金额:{{ scope.row.payCount || '' }}
                </p>
                <p style="font-size: 13px">
                  付款卡号：{{ scope.row.payCard || '' }}
                </p>
                <p style="font-size: 13px">
                  付款时间：{{ scope.row.payTime || '' }}
                </p>
              </div>
            </template>
          </el-table-column> -->
          <!--          <el-table-column-->
          <!--              prop="paymentMethodName"-->
          <!--              :key="'paymentMethodName'"-->
          <!--              label="材料付款方式"-->
          <!--              width="120px"-->
          <!--              show-overflow-tooltip-->
          <!--              v-if="cadShow"-->
          <!--          ></el-table-column>-->
          <!--          <el-table-column-->
          <!--              prop="goodsPaymentMethodName"-->
          <!--              :key="'goodsPaymentMethodName'"-->
          <!--              label="货架付款方式"-->
          <!--              width="120px"-->
          <!--              show-overflow-tooltip-->
          <!--              v-if="cadShow"-->
          <!--          ></el-table-column>-->
          <el-table-column
              prop="customPhone"
              :key="'customPhone'"
              label="客户联系方式"
              width="120px"
              show-overflow-tooltip
              v-if="cadShow"
          ></el-table-column>
          <el-table-column
              prop="quotationImgMoney"
              :key="'quotationImgMoney'"
              label="报价单转换金额"
              width="80px"
              v-if="authority.includes(294) && cadShow"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.quotationImgMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop=" payMoney"
              :key="'payMoney'"
              label="货架录入实付金额"
              width="80px"
              v-if="authority.includes(294) && cadShow"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.payMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="shelfPoorMoney"
              :key="'shelfPoorMoney'"
              label="报价-付款金额"
              width="80px"
              v-if="authority.includes(294) && cadShow"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.shelfPoorMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="materialPlaceMoney"
              :key="'materialPlaceMoney'"
              label="材料下单金额"
              width="80px"
              v-if="authority.includes(294) && cadShow && false"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.materialPlaceMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop=" materialPayMoney"
              :key="'materialPayMoney'"
              label="材料付款金额"
              width="80px"
              v-if="authority.includes(294) && cadShow && false"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.materialPayMoney) }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="materialPoorMoney"
              :key="'materialPoorMoney'"
              label="材料差额"
              width="80px"
              v-if="authority.includes(294) && cadShow && false"
          >
            <template v-slot:default="scope">
              <span>{{ formatWan(scope.row.materialPoorMoney) }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="totalAmount"
            :key="'totalAmount'"
            label="应收金额"
            width="80px"
            v-if="authority.includes(294) && cadShow"
          ></el-table-column> -->
          <!-- <el-table-column
            prop="payMoney"
            :key="'payMoney'"
            label="实付金额"
            width="80px"
            v-if="authority.includes(294) && cadShow"
          ></el-table-column> -->
          <!-- <el-table-column
            prop="totalPayment"
            :key="'totalPayment'"
            label="已回款总额"
            width="100px"
            v-if="authority.includes(293) && cadShow"
          ></el-table-column> -->
          <!-- <el-table-column
            prop="outStatus"
            :key="'outStatus'"
            label="出库状态"
            width="100px"
          >
            <template v-slot:default="scope">
              <span
                :style="{
                  color: scope.row.outStatus
                    ? scope.row.outStatus == 1
                      ? '#66b1ff'
                      : '#FF8C00'
                    : '#808080',
                }"
              >
                {{ outMap[scope.row.outStatus] }}</span
              >
            </template>
          </el-table-column> -->
          <el-table-column
              prop="storeImgs"
              :key="'storeImgs'"
              label="营业区原始图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.storeImgs"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.storeImgs).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="cadImg"
              :key="'cadImg'"
              label="营业区转化图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.cadImg"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.cadImg).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="storageOriginImg"
              :key="'storageOriginImg'"
              label="仓库原始图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.storageOriginImg"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.storageOriginImg).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="storageImg"
              :key="'storageImg'"
              label="仓库转化图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.storageImg"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.storageImg).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="goodsOfferImg"
              :key="'goodsOfferImg'"
              label="营业区报价图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.goodsOfferImg"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.goodsOfferImg).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="storageOfferImg"
              :key="'storageOfferImg'"
              label="仓储区报价图"
              width="100px"
          >
            <template v-slot:default="scope">
              <el-image
                  v-if="scope.row.storageOfferImg"
                  style="width: 50px"
                  :src="imgSrc"
                  :preview-src-list="
                  _imgRenders(scope.row.storageOfferImg).map((img) => img)
                "
              ></el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
              label="CAD"
              :key="'CAD'"
              :fixed="authority.includes(201) ? 'right' : false"
              width="70px"
          >
            <template v-slot:default="scope">
              <span v-if="scope.row.cadName">{{ scope.row.cadName }}</span>
              <el-link
                  v-else
                  style="
                  color: #13ce66;
                  font-size: 13px;
                  text-decoration: underline;
                "
                  @click="cadComfirm(scope.row)"
              >认领
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
              prop="id"
              :key="'id'"
              label="ID"
              width="70px"
              v-if="cadShow"
          ></el-table-column>
          <el-table-column label="操作" width="280px" fixed="right">
            <template v-slot:default="scope">
              <div>
                <el-dropdown size="mini" style="margin-right: 10px">
                  <el-button size="mini" type="text">
                    确认,录入
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-link
                          style="color: #ff3546"
                          @click="comfirmOrder(scope.row)"
                          v-if="
                          authority.includes(206) &&
                          scope.row.outStatus == 0 &&
                          scope.row.lockInventory == 1 &&
                          (scope.row.goodsOcr || scope.row.storageOcr)
                        "
                      >确认订单
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #ff6a00"
                          @click="_uploadCount(scope.row)"
                          v-if="authority.includes(206)"
                      >上传安装组数
                      </el-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown size="mini" style="margin-right: 10px">
                  <el-button size="mini" type="text">
                    详情,解析,明细
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          @click="collection(scope.row, 2)"
                          v-if="authority.includes(207)"
                      >回款详情
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          @click="_addition(scope.row, 2)"
                          v-if="authority.includes(208)"
                      >杂项详情
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          v-if="authority.includes(209)"
                          style="color: #64748b"
                          @click="_analysis(scope.row, 'goods')"
                      >货架解析详情
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          v-if="authority.includes(210)"
                          style="color: #64748b"
                          @click="_analysis(scope.row, 'storage')"
                      >仓储解析详情
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          v-if="authority.includes(211)"
                          @click="_analysis(scope.row, 'offer')"
                      >营业区报价解析
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          v-if="authority.includes(212)"
                          style="color: #64748b"
                          @click="_analysis(scope.row, 'storageOffer')"
                      >仓储区报价解析
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          @click="refundDetail(scope.row)"
                          v-if="authority.includes(213)"
                      >退款明细
                      </el-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-link
                    style="color: #121552;margin: 0 5px;font-size: 12px;text-decoration: underline"
                    @click="_cadSend(scope.row)"
                    v-if="authority.includes(1062)&&scope.row.sendCadGoods==0"
                >提交至仓库
                </el-link>
                <el-dropdown size="mini">
                  <el-button size="mini" type="text">
                    CAD转换
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-link
                          style="color: #2cb5e8"
                          @click="_addition(scope.row, 1)"
                          v-if="
                          authority.includes(214) &&
                          scope.row.lockInventory == 1
                        "
                      >杂项录入
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #66b1ff"
                          @click="_cad(scope.row)"
                          v-if="authority.includes(215)"
                      >CAD上传
                      </el-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div style="margin-top: 10px">
                <el-dropdown size="mini" style="margin-right: 10px">
                  <el-button size="mini" type="text">
                    回款,退款
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-link
                          style="color: #e6a23c"
                          @click="collection(scope.row, 1)"
                          v-if="authority.includes(216)"
                      >回款录入
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          @click="_refund(scope.row)"
                          v-if="authority.includes(217)"
                      >退款
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #e6a23c"
                          @click="collection(scope.row, 14)"
                          v-if="scope.row.systemType==14&&authority.includes(1061)"
                      >收银台、背景墙收款
                      </el-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

                <el-dropdown size="mini" style="margin-right: 10px">
                  <el-button size="mini" type="text">
                    下载
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-link
                          style="color: #67c23a"
                          @click="costs(scope.row)"
                          v-if="authority.includes(218)"
                      >成本导出
                      </el-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link
                          style="color: #64748b"
                          @click="_bjd(scope.row)"
                          v-if="authority.includes(219)"
                      >报价单下载
                      </el-link>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

                <!--                <el-dropdown size="mini">-->
                <!--                  <el-button size="mini" type="text">-->
                <!--                    确认到账-->
                <!--                    <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                <!--                  </el-button>-->
                <!--                  <el-dropdown-menu slot="dropdown">-->
                <!--                    <el-dropdown-item>-->
                <!--                      <el-link-->
                <!--                          style="color: #ff3546"-->
                <!--                          @click="materialShouMoney(scope.row)"-->
                <!--                          v-if="scope.row.materialPayMoneyStatus == 0&&authority.includes(220)"-->
                <!--                      >材料确认到账-->
                <!--                      </el-link>-->
                <!--                    </el-dropdown-item>-->
                <!--                    <el-dropdown-item>-->
                <!--                      <el-link-->
                <!--                          style="color: #ff3546"-->
                <!--                          @click="shelves(scope.row)"-->
                <!--                          v-if="scope.row.shelfPayMoneyStatus == 0&&authority.includes(221)"-->
                <!--                      >货架确认到账-->
                <!--                      </el-link>-->
                <!--                    </el-dropdown-item>-->
                <!--                  </el-dropdown-menu>-->
                <!--                </el-dropdown>-->
              </div>
              <div style="margin-top: 10px">
                <el-button
                    size="mini"
                    v-if="authority.includes(222)"
                    @click="_edit(scope.row)"
                    style="margin-right: 10px; color: #13ce66"
                    type="text"
                >录入货架信息
                </el-button>
                <el-button
                    size="mini"
                    v-if="authority.includes(223)"
                    @click="_delete(scope.row)"
                    type="text"
                    style="color: #ff4949"
                >删除
                </el-button>
              </div>
              <!-- <div class="handleAction">
                <el-link
                  style="color: #66b1ff"
                  @click="_edit(scope.row)"
                  v-if="authority.includes(207)"
                  >录入货架信息
                </el-link>
                <el-link
                  style="color: #ff6a00"
                  @click="_uploadCount(scope.row)"
                  v-if="authority.includes(207)"
                  >上传安装组数
                </el-link>
                <el-link
                  style="color: #ff3546"
                  @click="_delete(scope.row)"
                  v-if="authority.includes(208)"
                  >删除
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_refund(scope.row)"
                  v-if="authority.includes(977)"
                  >退款
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_bjd(scope.row)"
                  v-if="authority.includes(211)"
                  >报价单
                </el-link>
                <el-link
                  style="color: #e6a23c"
                  @click="collection(scope.row, 1)"
                  v-if="authority.includes(203)"
                  >回款录入
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="collection(scope.row, 2)"
                  v-if="authority.includes(205)"
                  >回款详情
                </el-link>
                <el-link
                  style="color: #2cb5e8"
                  @click="_addition(scope.row, 1)"
                  v-if="authority.includes(202) && scope.row.lockInventory == 1"
                  >杂项录入
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_addition(scope.row, 2)"
                  v-if="authority.includes(206)"
                  >杂项详情
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="downContract(scope.row)"
                  v-if="authority.includes(975)"
                  >下载合同
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_analysis(scope.row, 'goods')"
                  >货架解析详情
                </el-link>
                <el-link
                  style="color: #66b1ff"
                  @click="_cad(scope.row)"
                  v-if="authority.includes(201)"
                  >CAD上传
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_analysis(scope.row, 'storage')"
                  >仓储解析详情
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="refundDetail(scope.row)"
                  v-if="authority.includes(976)"
                  >退款明细
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_analysis(scope.row, 'offer')"
                  >营业区报价解析
                </el-link>
                <el-link
                  style="color: #67c23a"
                  @click="costs(scope.row)"
                  v-if="authority.includes(177)"
                  >成本导出
                </el-link>
                <el-link
                  style="color: #64748b"
                  @click="_analysis(scope.row, 'storageOffer')"
                  >仓储区报价解析
                </el-link>
                <el-link
                  style="color: #ff3546"
                  @click="comfirmOrder(scope.row)"
                  v-if="
                    authority.includes(303) &&
                    scope.row.outStatus == 0 &&
                    scope.row.lockInventory == 1 &&
                    (scope.row.goodsOcr || scope.row.storageOcr)
                  "
                  >确认订单
                </el-link>
                <el-link
                  style="color: #ff3546"
                  @click="reScroll(scope.row)"
                  v-if="
                    authority.includes(304) &&
                    scope.row.outStatus == 0 &&
                    scope.row.lockInventory == 2
                  "
                  >回滚库存
                </el-link>

                <el-link
                  style="color: #ff3546"
                  @click="materialShouMoney(scope.row)"
                  v-if="scope.row.materialPayMoneyStatus == 0"
                  >材料确认到账
                </el-link>
                <el-link
                  style="color: #ff3546"
                  @click="shelves(scope.row)"
                  v-if="scope.row.shelfPayMoneyStatus == 0"
                  >货架确认到账
                </el-link>
              </div> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            style="padding: 20px 0"
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-tabs>
    <!--    顶部搜索-->
    <!--    新增订单 新的-->
    <addOrderNew ref="addDialogNew" @addStatus="receiveData"></addOrderNew>
    <!--    新增订单 旧的-->
    <addOrder ref="addDialog" @addStatus="receiveData"></addOrder>
    <!--    退款+退款明细-->
    <refundDialog ref="refund" @addStatus="receiveData"></refundDialog>
    <!--    表格下载 报价单-->
    <exportOrderExcel ref="orderExcel"></exportOrderExcel>
    <!--    回款录入/回款详情-->
    <collectionOption ref="collect" @addStatus="receiveData"></collectionOption>
    <!--    杂项录入/杂项详情-->
    <additionOrder ref="addition" @addStatus="receiveData"></additionOrder>
    <!--    货架解析  仓储区解析 -->
    <goodsAnalysis ref="analysisRef"></goodsAnalysis>
    <!--    CAD上传-->
    <CADupload ref="cadDialog" @addStatus="receiveData"></CADupload>
    <comfirmOrder ref="comfirmOrderRef" @addStatus="receiveData"></comfirmOrder>
    <el-dialog
        :visible.sync="upCountDialog"
        title="上传套件组数"
        center
        :close-on-click-modal="false"
        width="30%"
    >
      <div>
        <p style="margin-bottom: 10px">利旧安装组数：</p>
        <p>
          <span>营业区：</span>
          <el-input-number
              v-model="anZ.azGoodsCount"
              style="margin-right: 10px"
          ></el-input-number>
          <span>仓储区：</span>
          <el-input-number v-model="anZ.azStorageCount"></el-input-number>
        </p>
        <p style="margin-top: 10px"><span>收银台：</span>
          <el-input-number v-model="anZ.cashRegisterCount"></el-input-number>
        </p>

        <p style="margin-top: 50px; margin-bottom: 10px">利旧拆卸组数：</p>
        <span>营业区：</span>
        <el-input-number
            v-model="anZ.azDisassembleCount"
            style="margin-right: 10px"
        ></el-input-number>
        <span>仓储区：</span>
        <el-input-number v-model="anZ.azDisStorageCount"></el-input-number>
      </div>
      <!--      <div style="display: flex;align-items: center;justify-content: center">-->
      <!--        <el-input-number v-model="azGoodsCount"></el-input-number>-->
      <!--      </div>-->
      <span slot="footer">
        <el-button type="info" size="small" @click="upCountDialog = false"
        >取消</el-button
        >
        <el-button type="primary" size="small" @click="submitAzCount"
        >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _imgRenders from '../../assets/js/dealPic.js'
import addOrder from './orderListDialog/addOrder.vue'
import addOrderNew from './orderListDialog/addOrderNew.vue'
import RefundDialog from './orderListDialog/refundDialog.vue'
import exportOrderExcel from './orderListDialog/exportOrderExcel.vue'
import collectionOption from './orderListDialog/collectionOption.vue'
import additionOrder from './orderListDialog/additionOrder.vue'
import goodsAnalysis from './orderListDialog/goodsAnalysis.vue'
import CADupload from './orderListDialog/CADupload.vue'
import comfirmOrder from './orderListDialog/comfirmOrder.vue'
import cloumn from '../../utils/tableCloumn.js'
import dayjs from 'dayjs'

export default {
  name: 'testOrder',
  components: {
    RefundDialog,
    addOrder,
    exportOrderExcel,
    collectionOption,
    additionOrder,
    goodsAnalysis,
    CADupload,
    comfirmOrder,
    addOrderNew,
  },
  data() {
    return {
      anZ: {
        azGoodsCount: '',
        azStorageCount: '',
        azDisassembleCount: '',
        azDisStorageCount: '',
        cashRegisterCount: ""
      },
      isShowMoreTab: false,
      upCountDialog: false,
      azGoodsCount: '',
      azId: '',
      loading: false,
      drawer: false,
      activeName: '1',
      systemType: '',
      sateValue: '',
      params: {
        pageNumber: 1,
        pageSize: 20,
        orderBy: 1,
        orderType: 1,
        outStatus: '',
        areaId: '',
        cadName: '',
        creatorName: '',
        endTime: '',
        isDebt: '',
        startTime: '',
        storeName: '',
      },
      imgSrc:
          'https://qiniushelves.jiachuangnet.com/shelf/img/%E6%9F%A5%E7%9C%8B%E8%AF%A6%E6%83%85.png',
      orderData: [],
      systemList: [],
      cloumn: cloumn,
      currentPage: 1,
      totalCount: 0,
      areaData: [],
      tempConfig: [],
      outSpringStatus: [
        {
          name: '全部',
          id: -1,
        },
        {
          name: '待出库',
          id: 0,
        },
        {
          name: '部分出库',
          id: 1,
        },
        {
          name: '全部出库',
          id: 2,
        },
      ],
      outMap: {
        0: '待出库',
        1: '部分出库',
        2: '全部出库',
      },
      authority: [],
      cadShow: true,
      orderType: [
        {
          name: '新增店铺',
          id: 1,
        },
        {
          name: '老店翻新',
          id: 2,
        }, {
          name: '新增店铺含利旧',
          id: 3,
        },
      ],
      isDebtData: [
        {
          name: '欠款',
          id: 0,
        },
        {
          name: '已结清',
          id: 1,
        },
      ],
      ruleData: [
        {
          name: '默认排序',
          id: 1,
        },
        {
          name: '发货时间',
          id: 2,
        },
        {
          name: '修改时间',
          id: 3,
        },
      ],
    }
  },
  watch: {
    $route(to, from) {
      if (to.path !== from.path) {
        this.params = this.$options.data.call(this).params
        this.getOrderList()
      }
    },
  },
  computed: {
    headerStyle() {
      const colorMap = {
        1: '#409EFF',
        2: '#121552',
        3: '#67C23A',
        4: '#E6A23C',
        5: '#F56C6C',
        6: '#2E8B57',
        7: '#9A7DFF',
        8: '#FF7F50',
        9: '#00CED1',
        10: '#9370DB',
        11: '#4682B4',
        12: '#8B008B',
        13: '#20B2AA',
        14: '#662565',
      }
      const bg = colorMap[String(this.systemType)] || '#66b1ff'
      return bg
    },
  },
  //各品牌操作
  // systemType() {
  //   const map = {
  //     'OrderManage': 1,
  //     'OrderYouXuan': 2,
  //     'OrderKaYou': 3,
  //     'OrderBingBei': 4,
  //     'OrderPaite': 5,
  //     'OrderBaobao': 6,
  //     'OrderHigh': 7,
  //     'OrderLife': 8,
  //     'OrderXixi': 9,
  //     'OrderLele': 10,
  //     'OrderBigMouse': 11,
  //     'OrderChongqing': 12,
  //     'OrderDouXiaocang': 13,
  //   }
  //   return map[this.$route.name] || 0
  // },
  created() {
    const {authorityList = []} = this.$quinn.getStorage('userData') || {}
    this.authority = authorityList
    this.$api.areaLedgerAreaList().then((res) => {
      this.areaData = res
    })
    this.loadColumnConfig()
    this.getSystemType()
  },
  mounted() {
    this.cadShow = JSON.parse(localStorage.getItem('cadShow')) ?? true
  },
  methods: {
    //赵一鸣收银台、背景墙回款
    collectionYiming(row, type) {

    },
    //金额以万为单位
    formatWan(val) {
      if (val == null || val === '') return '-'
      const num = Number(val)
      if (isNaN(num)) return '-'
      return Number((num / 10000).toFixed(5))
    },
    //对接上传安装组数
    _uploadCount(a) {
      this.azId = a.id
      this.upCountDialog = true
      Object.keys(a).forEach((key) => {
        this.anZ[key] = a[key]
      })
    },
    submitAzCount() {
      const data = {
        ...this.anZ,
        orderId: this.azId,
      }
      this.$api.orderUpdateAzGoodsCount(data).then((res) => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.upCountDialog = false
          this.anZ = this.$options.data.call(this).anZ
          this.getOrderList()
        }
      })
    },
    //获取品牌方列表
    async getSystemType() {
      const res = await this.$api.orderGetSystemTypeVo()
      this.systemList = res
      this.systemType = res[0].id
      this.getOrderList()
    },
    handleClick(tabs, event) {
      console.log('tabs___handleClick', tabs.name)
      this.systemType = tabs.name
      this.getOrderList()
    },
    _imgRenders,
    //解决鼠标拖动改变单元格宽度后 fixed right 高度下陷问题
    handleHeaderDragend() {
      // 拖动结束后重新布局
      this.$nextTick(() => {
        this.$refs.table.doLayout()
        this.getOrderList()
      })
    },
    cadModel() {
      this.cadShow = false
      localStorage.setItem('cadShow', JSON.stringify(this.cadShow))
      this.handleHeaderDragend()
    },
    cancelCadModel() {
      this.cadShow = true
      localStorage.setItem('cadShow', JSON.stringify(this.cadShow))
      this.handleHeaderDragend()
    },
    getOrderList() {
      this.loading = true
      const data = {
        ...this.params,
        systemType: this.systemType,
      }
      this.$api.orderOrderList(data).then((res) => {
        this.orderData = res.data
        this.totalCount = res.total
        this.loading = false
      })
      // const data = {page: 1, size: 10}
      // this.$api.orderOrderList(data).then(res => {
      //   this.orderData = res.data || []
      //   this.totalCount = res.total || 0
      //   this.loading = false
      //
      //   const first = this.orderData[0] || {}
      //
      //   // 根据返回字段是否存在动态控制列显示
      //   JSON.parse(localStorage.getItem('tableColumnConfig_fixed')).forEach(col => {
      //     col.show = Object.prototype.hasOwnProperty.call(first, col.prop)
      //   })
      // }).catch(() => {
      //   this.loading = false
      // })
    },
    getShow(prop) {
      const item = this.cloumn.find((col) => col.prop === prop)
      return item ? item.show : false
    },
    _search() {
      this.params.pageNumber = 1
      this.getOrderList()
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.sateValue = ''
      this.getOrderList()
    },
    _addNew() {
      console.log('21')
      const val = {
        systemType: this.systemType,
      }
      this.$refs.addDialogNew.handleOpen(val, this.areaData, '1')
    },
    _add() {
      console.log('1')

      const val = {
        systemType: this.systemType,
      }
      this.$refs.addDialog.handleOpen(val, this.areaData, '1')
    },
    _edit(row) {
      const val = {
        ...row,
        systemType: this.systemType,
      }
      this.$refs.addDialog.handleOpen(val, this.areaData, '2')
    },
    _contactList() {
      this.$refs.orderExcel.exportContractList(this.systemType)
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getOrderList()
    },
    receiveData() {
      this.getOrderList()
    },
    //  删除订单
    _delete(row) {
      const data = {
        id: row.id,
      }
      this.$confirm(`确认删除${row.storeName}吗？`)
          .then((_) => {
            this.$api.orderOrderDelete(data).then()
            this.$message.success('删除成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //  处理欠款
    dealDebt(row) {
      const data = {
        id: row.id,
      }
      this.$confirm(`${row.storeName}已经结清？`)
          .then((_) => {
            this.$api.orderUpdateIsDebt(data).then()
            this.$message.success('操作成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //  cad发送至仓库-允许仓库下载货架清单
    _cadSend(row) {
      const data = {
        orderId: row.id,
      }
      this.$confirm(`允许仓库下载${row.storeName}货架清单？`)
          .then((_) => {
            this.$api.orderUpdateSendCadGoods(data).then()
            this.$message.success('操作成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //  cad认领
    cadComfirm(row) {
      const data = {
        orderId: row.id,
      }
      this.$confirm(`确定认领-${row.storeName}？`)
          .then((_) => {
            this.$api.orderUpdateOrderCadUserId(data).then()
            this.$message.success('操作成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //退款
    _refund(row) {
      this.$refs.refund.handleOpen(row)
    },
    //退款明细
    refundDetail(row) {
      this.$refs.refund.checkRefundDetail(row)
    },
    //  报价单
    _bjd(row) {
      this.$refs.orderExcel.exportWarehouseOrder(row)
    },
    //成本导出
    costs(row) {
      this.$refs.orderExcel.exportCost(row)
    },
    //  回款录入+回款详情
    collection(row, type) {
      if (type == 1) this.$refs.collect.inCollect(row)
      if (type == 2) this.$refs.collect.collectDetail(row)
      if (type == 14) this.$refs.collect.inCollect(row, 14)

    },
    //杂项录入+杂项详情
    _addition(row, type) {
      if (type == 1) this.$refs.addition._add(row)
      if (type == 2) this.$refs.addition._check(row)
    },
    //  下载合同
    downContract(row) {
      if (row.contractImg) {
        window.open('https://' + row.contractImg, '_blank')
      } else {
        return this.$message.warning('合同还未上传。')
      }
    },
    _analysis(row, type) {
      this.$refs.analysisRef.handleOpen(row, type)
    },
    //  cad上传
    _cad(row) {
      this.$refs.cadDialog.handleOpen(row)
    },
    //  确认订单
    comfirmOrder(row) {
      this.$refs.comfirmOrderRef.handleOpen(row)
    },
    //货架确认收款
    shelves(row) {
      const data = {
        orderId: row.id,
        flag: 2, //1材料 2货架
      }
      this.$confirm('确认货架到账吗？')
          .then((_) => {
            this.$api.orderUpdatePayStatus(data).then()
            this.$message.success('操作成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //材料确认收款
    materialShouMoney(row) {
      //orderCancelRollbackInventory
      const data = {
        orderId: row.id,
        flag: 1, //1材料 2货架
      }
      this.$confirm('确认材料到账吗？')
          .then((_) => {
            this.$api.orderUpdatePayStatus(data).then()
            this.$message.success('操作成功！')
            this.getOrderList()
          })
          .catch((_) => {
            return
          })
    },
    //用户筛选操作
    openDrawer() {
      this.tempConfig = JSON.parse(JSON.stringify(this.cloumn))
      this.drawer = true
    },
    //保存筛选视图
    confirmShow() {
      setTimeout(() => {
        this.drawer = false
        // 同步配置并保存到 localStorage
        localStorage.setItem(
            'tableColumnConfig_fixed',
            JSON.stringify(this.cloumn)
        )
        this.$message.success('显示设置已保存')
      }, 300)
    },
    //localStorage
    loadColumnConfig() {
      const saved = localStorage.getItem('tableColumnConfig_fixed')
      if (saved) {
        this.cloumn = JSON.parse(saved)
      }
    },
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .el-tabs__nav {
  padding-top: 13px !important;
}

/deep/ .el-tabs--left,
.el-tabs--right {
  height: 100%;
}

.system-1 .el-tabs__item.is-active {
  background-color: #409eff;
  color: #fff;
}

.system-2 .el-tabs__item.is-active {
  background-color: #121552;
  color: #fff;
}

.system-3 .el-tabs__item.is-active {
  background-color: #67c23a;
  color: #fff;
}

.topSearch {
  display: flex;
  flex-wrap: wrap;

  span {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
  }
}

.handleAction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .el-link {
    margin-right: 8px;
    font-weight: normal;
    font-size: 14px;
  }
}
</style>
